<!-- 小团在线-智能导服 -->
<template>
  <div class="container">
    <div class="wrapper">
      <div class="item" v-for="(item, index) in chatList" :key="index">
        <div class="left">
          <div v-if="item.type === 1" class="avatar logo"></div>
        </div>
        <div class="content" :style="{textAlign: item.type === 1 ? 'left' : 'right' }">
          <div class="dialog" :class="{blue: item.type === 0}">
            <div v-if="item.type === 1" class="dec-left"></div>
            <div v-if="item.type === 0" class="dec-right"></div>
            <div class="text" v-for="(text, indexj) in item.content" :key="indexj">{{text}}</div>
            <div class="business" v-for="(business, indexk) in item.list" @click="getMaterial(business)" :key="indexk">{{business.name}}</div>
          </div>
        </div>
        <div class="right">
          <div v-if="item.type === 0" class="avatar">
            <u-icon name="account-fill" size="45" color="#fff"></u-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="search-box">
      <div class="customer"><button class="btn" type="primary" size="mini" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">人工客服</button></div>
      <div class="search"><u-search v-model="keyword" placeholder="输入业务关键字" shape="square" search-icon :clearabled="false" action-text="发送" @custom="submit" @search="submit"></u-search></div> 
    </div>
  </div>
</template>
<script>
import { getBusinessDetailAPI } from "../../../api/department";

export default {
  data() {
    return {
      keyword: "",
      list: [],
      searchList: [],
      // 对话列表
      chatList: [
        {
          type: 1, // 1左边系统 0右边用户
          content: [
            "您好，请输入您想要办理的业务的关键词，团风政务服务将竭诚为您服务。",
          ],
          list: [],
        },
      ],
    };
  },
  onLoad(options) {
    wx.showLoading({
        title: "加载中...",
    });
    wx.hideLoading();
  },
  methods: {
    scrollTo() {
      // 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置
      wx.createSelectorQuery()
      .select(".wrapper")
      .boundingClientRect((res) => {
          // 到这里，我们可以从res中读到class为bb4的top，即离顶部的距离（px）
          // 2使用wx.pageScrollTo()将页面滚动到对应位置
          wx.pageScrollTo({
              scrollTop: 100000, // 滚动到的位置（距离顶部 px）
              duration: 200, //滚动所需时间 如果不需要滚动过渡动画，设为0（ms）
          });
      })
      .exec();
    },
    getMaterial(item) {
      this.chatList.push({
        type: 1,
        content: [
          "您好，该业务所需资料：",
          ...item.dataList.map((d) => d.name),
          `承诺时限为 ${item.timeLimit} 天`,
        ],
      });
      setTimeout(() => {
        this.scrollTo()
      }, 0)
    },
    submit(v) {
      this.keyword = "";
      if (v.trim()) {
        this.chatList.push({
          type: 0,
          content: [v],
        });
        this.search(v);
      }
      setTimeout(() => {
        this.scrollTo()
      }, 0)
    },
    search(v) {
      getBusinessDetailAPI({ businessName: v}).then((res) => {
        let list = res.data;
        if (list.length) {
          this.chatList.push({
            type: 1,
            content: [
              "您好，您可能想办理以下业务，点击具体查看业务详情：",
            ],
            list,
          });
        } else {
          this.chatList.push({
            type: 1,
            content: [
              "您好，您所提问题小团暂时无法回复您，请您重新输入所需办理业务的关键词，如：身份证。",
            ],
            list: [{name: '或点击人工客服转人工服务。'}],
          });
        }
        setTimeout(() => {
          this.scrollTo()
        }, 0)
      })
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-color: #efefef;
  .wrapper {
      padding: 10px 0 100px;
      .item {
          display: flex;
          padding: 6px 0;
          .left,
          .right {
              flex: none;
              width: 60px;
              display: flex;
              justify-content: center;
              .avatar {
                  width: 35px;
                  height: 35px;
                  margin-top: 3px;
                  border-radius: 50%;
                  background: #ccc;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  &.logo {
                      background-image: url("https://tuanfeng.whkxzj.com/profile/static/20230109160643-logo.jpg");
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center;
                  }
              }
          }
          .content {
              flex: auto;
              .dialog {
                  position: relative;
                  display: inline-block;
                  margin: 0 5px;
                  background-color: #fff;
                  border-radius: 8px;
                  box-sizing: border-box;
                  padding: 10px 12px;
                  text-align: left;
                  &.blue {
                      background-color: #0c92ff;
                      color: #fff;
                  }
                  .business {
                      color: #0c92ff;
                  }
                  .dec-left {
                      position: absolute;
                      top: 13px;
                      left: -5px;
                      width: 15px;
                      height: 15px;
                      transform: rotateZ(45deg);
                      background: #fff;
                  }
                  .dec-right {
                      position: absolute;
                      top: 13px;
                      right: -5px;
                      width: 15px;
                      height: 15px;
                      transform: rotateZ(45deg);
                      background: #0c92ff;
                  }
                  .text {
                      margin-bottom: 8px;
                      line-height: 1.5;
                      &:last-child {
                          margin: 0;
                      }
                  }
                  .business {
                      margin-bottom: 8px;
                      &:last-child {
                          margin: 0;
                      }
                  }
              }
          }
      }
  }
  .search-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .customer {
      margin-left: 15px;
      margin-bottom: 5px;
      .btn {
        background-color: #2979FF;
        font-size: 12px;
      }
    }
    .search {
      padding: 10px 15px 20px;
      background-color: #fff;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      box-sizing: border-box;
    }
  }
}
</style>
